$(document).ready(function() {


    tamanho = $(window).width();
    
    if(tamanho > 1200){
        elemento = $('#subNav .sub1 a');
        ref = $('#subNav .sub1 a').attr('href');
        $('.dir').before('<li><a href=\''+ref+'\'>'+$('#subNav .sub1 a').text()+'</a></li>');
        $('.sub1').remove();

        elemento = $('#subNav .sub2 a');
        ref = $('#subNav .sub2 a').attr('href');
        $('.dir').before('<li>|</li><li><a href=\''+ref+'\'>'+$('#subNav .sub2 a').text()+'</a></li>');
        $('.sub2').remove();

        elemento = $('#subNav .sub3 a');
        ref = $('#subNav .sub3 a').attr('href');
        $('.dir').before('<li>|</li><li><a href=\''+ref+'\'>'+$('#subNav .sub3 a').text()+'</a></li><li>|</li>');
        $('.sub3').remove();
    }

    if(tamanho > 1100 && tamanho < 1200){
        elemento = $('#subNav .sub1 a');
        ref = $('#subNav .sub1 a').attr('href');
        $('.dir').before('<li><a href=\''+ref+'\'>'+$('#subNav .sub1 a').text()+'</a></li>');
        $('.sub1').remove();

        elemento = $('#subNav .sub2 a');
        ref = $('#subNav .sub2 a').attr('href');
        $('.dir').before('<li>|</li><li><a href=\''+ref+'\'>'+$('#subNav .sub2 a').text()+'</a></li><li>|</li>');
        $('.sub2').remove();
    }

    if(tamanho > 1000 && tamanho < 1100){
        elemento = $('#subNav .sub2 a');
        ref = $('#subNav .sub2 a').attr('href');
        $('.dir').before('<li><a href=\''+ref+'\'>'+$('#subNav .sub2 a').text()+'</a></li>');
        $('.sub2').remove();

        elemento = $('#subNav .sub3 a');
        ref = $('#subNav .sub3 a').attr('href');
        $('.dir').before('<li>|</li><li><a href=\''+ref+'\'>'+$('#subNav .sub3 a').text()+'</a></li><li>|</li>');
        $('.sub3').remove();

    }


    $("#css-coral").click(function() {
        $("link[href*='cores']").attr({
            href : "/stylesheets/cores_coral.css"
        });
    });

    $("#css-azul").click(function() {
        $("link[href*='cores']").attr({
            href : "/stylesheets/cores_azul.css"
        });
    });

    $("#css-verde").click(function() {
        $("link[href*='cores']").attr({
            href : "/stylesheets/cores_verde.css"
        });
    });

    $("#css-imagem").click(function() {
        $("link[href*='cores']").attr({
            href : "/stylesheets/cores_imagem.css"
        });
    });

    $("#css-rad").click(function() {
        $("link[href*='cores']").attr({
            href : "/stylesheets/cores_rad.css"
        });
    });

    $("#css-cinza").click(function() {
        $("link[href*='cores']").attr({
            href : "/stylesheets/cores_cinza.css"
        });
    });
    
});






